<template>
	<view class="brand" v-if="pageShow">
		<header-top :messageInfo="{typeFlag:true,message:'选择商品',liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content flexleft">
					<view class="zengpin" @click="selectZp" v-if="type==3">
						<view class="zp"></view>
						<view class="xiaotext">促销</view>
					</view>
				</view>
			</view>
		</header-top>
		<view class="mainpadding">
			<view class="flexbetween">
				<view class="sousuo margin_right" @click="spFenLeiShow=true">筛选</view>
				<input class="input-text" type="text" placeholder="请输入商品名称" confirm-type="search" @confirm="init"
					v-model="keyword">
				<view class="sousuo" @click="init">搜索</view>
			</view>
			<view class="titletext margin_top">
				共计：{{list.total}}个
			</view>
		</view>
		<view class="flexcenter" v-if="!list.total">
			<view class="placeholderimage"></view>
		</view>

		<view style="padding-bottom: 150rpx;">
			<view class="rightitem mainpadding" v-for="item in list.data" :key="item.id" @click="checkgoods(item)">
				<view class="flexbetween">
					<view class="nostrongtext">{{item.name}}</view>
					<view class="Vector" v-show="item.is_check"></view>
					<view class="Vectorhuse" v-show="!item.is_check"></view>
				</view>
				<view class="flexbetween margin_top">
					<image :src="item.image_text" class="leftimg" mode=""></image>
					<view class="flexcolumn"
						style="height: 120rpx;align-items: flex-start;justify-content: space-between;">
						<view class="flexleft" v-if="item.biggoodsunit.id">
							<view class="huisetext margin_right1">大：{{item.biggoodsunit.name}}</view>
							<view class="huisetext" style="color: #0BBDCB;"
								v-show="Number(item.biggoodsunit.use_stock)>0">可用：{{item.biggoodsunit.use_stock}}</view>
							<view class="huisetext" style="color: #ff0000;"
								v-show="Number(item.biggoodsunit.use_stock)<0">可用：{{item.biggoodsunit.use_stock}}</view>
							<view class="huisetext" style="color: #2cd551;"
								v-show="Number(item.biggoodsunit.priceinfo.buy_send_score)>0">
								积分：{{item.biggoodsunit.priceinfo.buy_send_score}}</view>
						</view>
						<view class="flexleft" v-if="item.middlegoodsunit.id">
							<view class="huisetext margin_right1">中：{{item.middlegoodsunit.name}}</view>
							<view class="huisetext" style="color: #0BBDCB;"
								v-show="Number(item.middlegoodsunit.use_stock)>0">可用：{{item.middlegoodsunit.use_stock}}
							</view>
							<view class="huisetext" style="color: #ff0000;"
								v-show="Number(item.middlegoodsunit.use_stock)<0">可用：{{item.middlegoodsunit.use_stock}}
							</view>
							<view class="huisetext" style="color: #2cd551;"
								v-show="Number(item.middlegoodsunit.priceinfo.buy_send_score)>0">
								积分：{{item.middlegoodsunit.priceinfo.buy_send_score}}</view>
						</view>
						<view class="flexleft" v-if="item.smallgoodsunit.id">
							<view class="huisetext margin_right1">小：{{item.smallgoodsunit.name}}</view>
							<view class="huisetext" style="color: #0BBDCB;"
								v-show="Number(item.smallgoodsunit.use_stock)>0">可用：{{item.smallgoodsunit.use_stock}}
							</view>
							<view class="huisetext" style="color: #ff0000;"
								v-show="Number(item.smallgoodsunit.use_stock)<0">可用：{{item.smallgoodsunit.use_stock}}
							</view>
							<view class="huisetext" style="color: #2cd551;"
								v-show="Number(item.smallgoodsunit.priceinfo.buy_send_score)>0">
								积分：{{item.smallgoodsunit.priceinfo.buy_send_score}}</view>
						</view>
					</view>

				</view>

			</view>
		</view>
		<!-- 底部 -->
		<view class="dibubox ffffff">
			<view class="flexbetween">
				<view class="">
					<view class="flexleft" @click="is_kc">
						<view class="Vector" v-show="is_has_stock==1"></view>
						<view class="Vectorhuse" v-show="is_has_stock==0"></view>
						<view class="nostrongtext">显示有库存产品</view>
					</view>
					<view class="flexleft margin_top" @click="is_bj" v-if="type!=2 && type!=3">
						<view class="Vector" v-show="is_has_kcyj==1"></view>
						<view class="Vectorhuse" v-show="is_has_kcyj==0"></view>
						<view class="nostrongtext">显示有库存报警产品</view>
					</view>
				</view>

				<view class="quedingbtn" @click="submit">确认({{ids.length}})</view>
			</view>
		</view>
		<selectSPFenLei :message="{spFenLeiShow:spFenLeiShow}" @spFenLeiSure="spFenLeiSure"></selectSPFenLei>
		<!-- 选择商品分类 -->

	</view>
</template>
<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				warehouse_id: "3",
				type: 1, // 1采购单,2采购退货单3销售单4退货单5入库单6出库单7调拨单
				keyword: "",
				page: 1,
				limit: 12,
				list: {
					data: [],

				},
				ids: [],
				// 商品分类
				spFenLeiShow: false,
				spFenLeiText: "",
				category_id: "", //商品分类id
				is_has_stock: 0, //0全部，1只显示有库存的商品
				custom_id: "",
				supplier_id:"",
				pd_id: "",
				is_has_kcyj: 0, //显示库存报警商品
				pageShow: false,
			}
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.getmsg));
			this.warehouse_id = data.warehouse_id
			this.type = data.type
			this.keyword = data.keyword
			if (data.custom_id) {
				this.custom_id = data.custom_id
			}
			if (data.supplier_id) {
				this.supplier_id = data.supplier_id
			}
			if (data.type == 8) {
				this.pd_id = data.pd_id
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			submit() {
				if (this.ids.length == 0) {
					httpRequest.toast("请选择商品！")
					return false
				}
				if (this.type != 8) {
					let data = {
						type: this.type,
						ids: this.ids,
						custom_id:this.custom_id,
						supplier_id:this.supplier_id,
						warehouse_id: this.warehouse_id
					}
					console.log(1213);
					uni.navigateTo({
						url: '/pages/workbench/xiaoshou/tianjiaspgwcyskye?getmsg=' + encodeURIComponent(JSON
							.stringify(data)),
						fail(err) {
							console.log(err, "跳转页面报错");
						}
					})
				} else {
					let data = {
						ids: this.ids,
						pd_id: this.pd_id,
						warehouse_id: this.warehouse_id
					}
					uni.navigateTo({
						url: '/pages/workbench/kucun/pandiankc?getmsg=' + encodeURIComponent(JSON.stringify(data))
					})
				}
			},
			init(isPage, page) {
				let _this = this;
				let ly = 1
				if (this.type == 2 || this.type == 3) { //采购退货单,销售单来源传2
					ly = 2
				}
				let data = {
					page: page || 1,
					limit: _this.limit,
					category_id: this.category_id,
					keyword: this.keyword,
					ly,
					status: "normal",
					warehouse_id: this.warehouse_id,
					is_has_stock: this.is_has_stock,
					is_has_kcyj: this.is_has_kcyj
				}
				if (this.type == 5 || this.type == 6) {
					delete data.status
				}
				httpRequest.request("/dhtapi/goods/index", 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data.data;
						resList.data.forEach(item => {
							this.$set(item, "is_check", false)
							this.ids.forEach(ite => {
								if (item.id == ite) {
									item.is_check = true
								}
							})
						})
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = resList
							_this.list.data = resList.data;
						}
						this.pageShow = true
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			spFenLeiSure(e) { //商品分类
				if (e) {
					this.spFenLeiText = e.spFenLeiText
					this.category_id = e.category_id
				}
				this.spFenLeiShow = false
				this.init()
			},
			checkgoods(item) {
				if (item.is_check) {
					item.is_check = false
					this.ids.splice(this.ids.findIndex(data => data === item.id), 1)

				} else {
					item.is_check = true
					this.ids.push(item.id)
				}

			},
			// 选择赠品
			selectZp() {
				let getmsg = {
					type: 3,
					custom_id: this.custom_id,
					warehouse_id: this.warehouse_id
				}
				uni.navigateTo({
					url: '/pages/workbench/xiaoshou/zengpinlb?getmsg=' + encodeURIComponent(JSON.stringify(getmsg))
				})
			},
			// 返回上一页
			gotoBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			is_kc() {
				this.is_has_stock = this.is_has_stock == 1 ? 0 : 1
				this.init()
			},
			is_bj() {
				this.is_has_kcyj = this.is_has_kcyj == 1 ? 0 : 1
				this.init()
			},
			jumpdetail(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.leftimg {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
	}

	.content {
		width: 100%;
		height: calc(100vh - 200rpx - 176rpx);
	}

	.leftclass {
		position: fixed;
		left: 0;
		top: 200rpx;
		// width: 200rpx;
		z-index: 2;
		height: calc(100vh - 200rpx - 176rpx);
		overflow-y: auto;
		padding-left: 30rpx;
		background-color: #FAFAFA;
	}

	// 右边内容
	.rightclass {
		width: 100%;
		padding: 0 30rpx 185rpx 230rpx;
		box-sizing: border-box;
	}

	.scroll-Y2 {
		width: calc(100vw - 200rpx);
		height: calc(100vh- 85px);
		background-color: #fff;
	}

	.slider {
		width: 18rpx;
		height: 12rpx;
	}

	.maincolor_text {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #0BBDCB;
	}

	.jiaobiao {
		font-size: 20rpx;
		color: #fff;
		background-color: #0BBDCB;
		border-radius: 50%;
		width: 28rpx;
		height: 28rpx;
	}
</style>
<style lang="scss" scoped>
	.Vector {
		background-image: url('@/static/image/system/Vector.png');
		width: 35rpx;
		height: 35rpx;
		background-size: 100% 100%;
	}

	.Vectorhuse {
		background-image: url('@/static/image/system/Vectorkong.png');
		width: 35rpx;
		height: 35rpx;
		background-size: 100% 100%;
	}

	.quedingbtn {
		width: 212rpx;
		height: 62rpx;
		font-size: 32rpx;
		background: linear-gradient(273deg, #0BBDCB 0%, #41D4E2 100%);
		border-radius: 41rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.dibubox {
		padding: 30rpx 30rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
	}

	.sousuo {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
	}

	.input-text {
		width: 488rpx;
		padding: 18rpx 0 18rpx 32rpx;
		background: rgba(153, 153, 153, .1);
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.gouwuche {
		background-image: url('@/static/image/system/gouwuche.png');
		width: 44rpx;
		height: 44rpx;
		background-size: 100% 100%;
	}

	.huisetext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.zengpin {
		margin-right: 20rpx;
	}

	.dhh {
		background-image: url('@/static/image/system/dhh.png');
		width: 34rpx;
		height: 34rpx;
		margin: auto;
		background-size: 100% 100%;
	}

	.xiaotext {
		font-size: 18rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.zp {
		background-image: url('@/static/image/system/zp.png');
		width: 34rpx;
		margin: auto;
		height: 34rpx;
		background-size: 100% 100%;
	}

	// 公用的样式
	.color-border {
		color: #0BBDCB;
		border-left: 6rpx solid #0BBDCB;
	}

	// 顶部自定义
	.header-top-box {
		height: 170rpx;
		width: 100%;
	}

	.header-top {
		width: 100%;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
		background-color: #fff;
		padding: 96rpx 40rpx 10rpx;
	}

	.top-image {
		margin-top: 20rpx;
		width: 20rpx;
		height: 38rpx;
		background: url('@/static/image/system/return.png') no-repeat;
		background-size: 20rpx 38rpx;
	}

	// 自定义顶部搜索
	.searchinput {
		margin-top: 20rpx;
		background-color: #f7f7f7;
		border-radius: 50rpx;
		padding: 12rpx 20rpx;

		input {
			width: 100%;
		}
	}

	.searchimg {
		width: 34rpx;
		height: 34rpx;
		background-image: url("@/static/image/system/search.png");
		background-size: 100% 100%;
		margin-right: 30rpx;
	}

	.centerleft::-webkit-scrollbar {
		display: none;
	}

	.rightitem {
		border-bottom: 2rpx solid #f7f7f7;
	}
</style>